<?php
$url = $control->getAjaxLinkUrl('uploadImage');
$updateId = $control->getAjaxContainerId();
$gallery = new ImageFormModel();
$model = new ImageFormModel();
?>
<script>
// this script executes when click on upload images link
    function uploadImage() {
        $("#forum_image").click();
        return false;
    }
</script>

<script type="text/javascript">
// this script for collecting the form data and pass to the controller action and doing the on success validations
    function send() {
        var formData = new FormData($("#post-form")[0]);
        $.ajax({
            url: '<?php echo $url; ?>',
            type: 'POST',
            data: formData,
            datatype: 'json',
            // async: false,
            beforeSend: function() {
                $("#ajax-loaderdiv").show();
            },
            success: function(data) {
                // on success do some validation or refresh the content div to display the uploaded images 
                jQuery("#<?php echo $updateId; ?>").load("<?php echo $control->getLayoutView(); ?>");
            },
            complete: function() {
                $("#ajax-loaderdiv").hide();
            },
            error: function(data) {
                alert("There may a error on uploading. Try again later");
            },
            cache: false,
            contentType: false,
            processData: false
        });

        return false;
    }
</script>
<?php
$form = $this->beginWidget('CActiveForm', array(
    'id' => 'post-form',
    'enableAjaxValidation' => FALSE,
    'htmlOptions' => array('enctype' => 'multipart/form-data'),
        ));
?>
<div style="display: none;">
    <?php
    echo $form->fileField($gallery, 'image', array('id' => 'forum_image',)); // image file select when clicks on upload photo
    ?>
</div>
<div class="row">
    <?php
    echo $form->textArea($model, 'url', array('placeholder' => "What's going on...!", // placeholder
        'class' => 'status-txt-area', // css style class
    ));
    ?>
</div>
<div>
    <a href="" onclick="return uploadImage();"><b class="photo">Upload Photo</b></a> <!-- Image link to select imag -->
    <?php
    echo CHtml::htmlButton('Post', array(
        'onclick' => 'javascript: send();', // on submit call JS send() function
        'id' => 'post-submit-btn', // button id
        'class' => 'post_submit',
    ));

    //echo $control->getAjaxLink('Post');
    ?>
</div>
<?php $this->endWidget(); ?>
